<template>
	<view class="main">
		<u-navbar title="我的待办" @rightClick="rightClick" :autoBack="true" :bgColor="'#2289FF'"
			:titleStyle="{ color: '#FFF'}" leftIconColor="#FFF" rightText="已办记录" placeholder>
		</u-navbar>
		<view>
			<view class="search-box">
				<u-search placeholder="请输入关键字" v-model="queryParams.typeName" clearabled :showAction="false"></u-search>
			</view>
			<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
				<view class="center" v-if="listData.length">
					<view class="list-box" v-for="(item,index) in listData" :key="index" @click="goMyUpcoming(item)">
						<view class="left">
							<image class="pic" :src="applicationIcons[item.type]" alt="" />
						</view>
						<view class="middle">
							<view class="event-type">{{item.typeName}}</view>
							<view class="detail">申请人：{{item.createBy}}</view>
						</view>
						<view class="right">
							<view>{{item.startTime}}</view>
							<u-icon class="pic-right" name="arrow-right"></u-icon>
							<!-- <img class="pic-right" :src="require('https://pc.chinaonebuild.com/images/todoList/right.png')" alt=""> -->
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="no-data" v-if="!listData.length">
			<image class="no-data-pic" src="https://pc.chinaonebuild.com/images/todoList/noData.png" alt="">
				<view>暂无待办</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryParams: {
					typeName: "",
					pageSize: 10,
					pageNum: 1
				},
				//总数据
				total: 0,
				// 防抖
				deubge: null,
				listData: [],
				// 所有应用图标
				applicationIcons: {
					"alert": "https://pc.chinaonebuild.com/images/workspace/alarm.png",
					"patrol": "https://pc.chinaonebuild.com/images/workspace/patrol.png",
					"materialApproach": "https://pc.chinaonebuild.com/images/workspace/patrol.png",
					"当前车辆": "https://pc.chinaonebuild.com/images/workspace/currentVehicle.png",
					"人员管理": "https://pc.chinaonebuild.com/images/workspace/person.png",
					"visitor": "https://pc.chinaonebuild.com/images/workspace/visitor.png",
					// "车辆统计": "https://pc.chinaonebuild.com/images/workspace/vehicleStatistics.png",
					"车流统计": "https://pc.chinaonebuild.com/images/workspace/vehicleStatistics.png",
					"预定记录": "https://pc.chinaonebuild.com/images/workspace/appRecord.png",
					"在线监控": "https://pc.chinaonebuild.com/images/workspace/monitor.png",
					"我的审批": "https://pc.chinaonebuild.com/images/workspace/approval.png",
					"工位巡查": "https://pc.chinaonebuild.com/images/workspace/inspection.png",
					"设备监测": "https://pc.chinaonebuild.com/images/workspace/monitoring.png",
					"车辆登记": "https://pc.chinaonebuild.com/images/workspace/vehiclereg.png",
					"考勤查询": "https://pc.chinaonebuild.com/images/workspace/attendance.png",
					"holiday": "https://pc.chinaonebuild.com/images/workspace/fakeAttendance.png",
					"meeting": "https://pc.chinaonebuild.com/images/workspace/scheMeeting.png",
				},
			}
		},
		watch: {
			'queryParams.typeName'(v) {
				clearTimeout(this.deubge)
				this.deubge = setTimeout(() => {
					this.listData = []
					this.queryParams.pageNum = 1
					this.upcoming()
				}, 700)
			}
		},
		// onBackPress无响应时可使用此生命周期函数
		onUnload() {
			uni.navigateTo({
				url: 'pages/index/index'
			});
		},
		methods: {
			rightClick() {
				uni.navigateTo({
					url: 'pages/index/todoList/finishedList'
				});
			},
			// 点击跳转
			goMyUpcoming(item) {
				let label = ""
				switch (item.type) {
					case 'holiday':
						// 假勤申请
						label = `pages/workbench/myApproval/component/toBeApproved/component/details?id=${item.id}`
						break;
					case 'visitor':
						// 访客登记
						label = `pages/workbench/visitorInfo/components/visitorRegistration?id=${item.id}`
						break;
					case 'alert':
						// 告警详情
						label = `pages/workbench/alarmManagement/components/alarmDetail?id=${item.id}&cFrom=home`
						break;
					case 'patrol':
						// 巡更任务
						label = `pages/workbench/onlinePatrol/patrolDetail?id=${item.id}`
						break;
					case 'materialApproach':
						// 物资进场
						label = `pages/workbench/materialManagement/materialApproach/index?id=${item.id}`
						break;
					case 'meeting':
						// 会议预定
						// label = `pages/synthesize/bookingRecord/detail?id=${encodeURIComponent(JSON.stringify(item.id))}`
						label =
							`pages/synthesize/bookMeeting/ApprovalMeeting?id=${item.id}&payload=${encodeURIComponent(JSON.stringify(item))}`
						break;
				}
				uni.navigateTo({
					url: label
				})
			},
			// 下拉更新
			scrolltolower() {
				this.queryParams.pageNum += 1
				if (this.total <= this.listData.length) {
					uni.showToast({
						icon: 'loading',
						duration: 2000,
						title: '已经没有新的数据了！',
					})
					return
				}
				this.upcoming()
			},
			// 请求数据
			upcoming() {
				this.$api.upcoming({
					...this.queryParams,
					approvalStatus: 1
				}).then(res => {
					this.listData = this.listData.concat(res.rows)
					this.total = res.total
				})
			},
		},
		onLoad() {
			this.upcoming()
		},
	}
</script>

<style scoped lang="scss">
	::v-deep .u-navbar__content__right__text {
		color: #EEF3FA;
		font-size: 28rpx;
	}

	.no-data {
		margin-top: 146rpx;
		text-align: center;
	}

	.scroll-Y {
		height: 1150rpx;
	}

	.center {
		// margin-top: 110rpx;
	}

	.no-data-pic {
		width: 360rpx;
		height: 360rpx;
	}

	.main {
		padding: 28rpx 28rpx 0;
	}

	.search-box {
		// margin-bottom: 28rpx;
		width: 100%;
		position: relative;
		// top: 100rpx;
		// padding: 28rpx;
		padding-bottom: 14rpx;
		left: 0rpx;
		background-color: #fff;
		z-index: 9;
		box-sizing: border-box;
	}

	.list-box {
		display: flex;
		border-bottom: 1rpx solid #C0C4CC;
		height: 130rpx;
		padding: 28rpx 0;
	}

	.left {
		width: 60rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.pic {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.middle {
		margin-left: 16rpx;
		font-family: 'PingFang SC';
		flex: 1;

		.event-type {
			font-weight: 400;
			font-size: 28rpx;
			margin-bottom: 8rpx;
		}

		.detail {
			font-size: 24rpx;
		}
	}

	.right {
		display: flex;
		align-items: center;
		font-size: 24rpx;

		.pic-right {
			width: 32rpx;
			height: 32rpx;
		}
	}
</style>
